<template>
	<view class="custom-input">
		<view class="icon-box">
			<image :style="'width:' + iconWidth + 'rpx'" :src="'../../static/images/login/' + icon + '.png'" mode="widthFix"></image>
		</view>
		<view class="region-box" v-if="isRegion">
			<text @click="region_show = true">{{regionValue}}</text>
			<span class="triangle"></span>
			<dropdown v-show="region_show" :Top="40" :list="regionCode" @select="selectBusiness" @close="region_show = false"></dropdown>
		</view>
		<view class="input-box">
			<input @input="loadInput" :disabled="disabled" :type="isPwd?'password':'text'" :value="value" :placeholder="placehold" />
		</view>
		<view class="verification medium-font" v-if="isVerification" @click="verificationClick">
			<text :class="!isDao? 'main-color': ''">{{isDao? daoTime + 'S': i18n.login.getVerification}}</text>
		</view>
	</view>
</template>

<script>
	import Dropdown from '@/components/dropdown/index.vue'
	import {
		Toast,
		validEmail,
		validPhone
	} from '@/utils/util.js'
	import {
		sendCode,
		sendEmail
	} from '@/api/index.js'
	import {mapGetters} from 'vuex'
	export default {
		props: {
			value: {
				type: String,
				default: () => ''
			},
			icon: {
				type: String,
				default: () => 'phone'
			},
			placehold: {
				type: String,
				default: () => ''
			},
			isRegion: {
				type: Boolean,
				default: () => false
			},
			isPwd: {
				type: Boolean,
				default: () => false
			},
			isVerification: {
				type: Boolean,
				default: () => false
			},
			iconWidth: {
				type: Number,
				default: () => 32
			},
			phoneName: {
				type: String,
				default: () => ''
			},
			smstype: {
				type: Number,
				default: () => 0 //0 忘记密码 1 其它
			},
			loginType: {
				type: Number,
				default: () => 0 //0 邮箱 1手机
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否验证码手机或者邮箱
			special: {
				type: Boolean,
				default: false
			},
			
		},
		components: {
			Dropdown
		},
		computed: {
			...mapGetters(['smsSwitc', 'regionCode']),
			i18n() {
				return this.$t('message');
			}
		},
		data() {
			return {
				region_show: false,
				regionValue: '+86',
				isDao: false,
				daoTime: 60
			}
		},
		methods: {
			selectBusiness(val) {
				this.regionValue = val.value;
				this.$emit('prefix', val.value)
				this.region_show = false;
			},
			verificationClick() {
				if (!this.phoneName) return Toast(this.i18n.login.enterUser);
				if (this.isDao) return;
				this.isDao = true;
				this.daojishi()
			},
			async daojishi() {
				let _this = this;
				// console.log(_this.loginType);
				if(!_this.loginType && !validEmail( _this.phoneName)) {
					Toast(this.i18n.common.validEmail);
					_this.isDao = false;
					return;
				}
				if(_this.loginType && !validPhone( _this.phoneName)) {
					Toast(this.i18n.common.validPhone);
					_this.isDao = false;
					return;
				}
				let {
					error,
					res
				} = !_this.loginType ? await sendEmail({
					user_email: _this.phoneName,
					smstype: _this.smstype
				}) : await sendCode({
					mobile: _this.phoneName
				});
				if (error) return _this.isDao = false;
				Toast(this.i18n.login.sendSuccess);
				let time = setInterval(function() {
					if (_this.isDao) {
						_this.daoTime--;
					}
					if (!_this.daoTime) {
						_this.isDao = false;
						_this.daoTime = 60;
						clearInterval(time);
					}
				}, 1000)
			},
			// 集合 需要判断邮箱还是手机
			loadInput(e) {
				this.$emit('input', e.target.value);
				let value = e.target.value;
				if (!value || !this.special) return;
				if (validEmail(value)) {
					this.$emit('specialFun', 0)
					return;
				}
				if (validPhone(value)) {
					this.$emit('specialFun', 1)
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-input {
		height: 77rpx;
		display: flex;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		margin-top: 60rpx;

		.icon-box {
			margin-right: 30rpx;

			.icon-image {
				width: 32rpx;
			}
		}

		.region-box {
			padding-right: 20rpx;
			color: #fff;
			font-weight: bold;
			font-size: 28rpx;
			position: relative;
		}

		.input-box {
			width: calc(100% - 62rpx);
		}

		.verification {
			font-size: 28rpx;
			width: -webkit-fill-available;
			text-align: center;
		}

		.triangle {
			margin-left: 12rpx;
			display: inline-block;
			width: 0;
			height: 0;
			border-top: 16rpx solid rgba(255, 255, 255, .4);
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-radius: 4rpx;
		}
	}
</style>
